<!-- 3D环形图图结合chart.js -->
<!-- 网络设备归属泄露风险分布统计图 -->
<template>
  <div class="chart-container">
      <div ref="chart" class="chart" style="width: 100%;height: 200px;position: absolute;top: 50px;" />
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "./chart.js"; //工具类js
import { riskDataStatistics } from "@/api/networkEquipment/equipment";
const color = ["#4ba2e9", "#e9bd4b", "#3febcc"];
export default {
  name: "Chart",
  data() {
      return {
          optionData: [
              {
                  name: "风险距离<10KM",
                  value: 0,
              },
              {
                  name: "10KM<=风险距离<30KM",
                  value: 0,
              },
              {
                  name: "风险距离>30KM",
                  value: 0,
              },

          ],
          statusChart: null,
          option: {},
      };
  },
  created() {

      this.setLabel();
  },
  // mounted() {
  //     this.initChart();
  //     const that = this;
  //     window.onresize = function () {
  //         that.changeSize();
  //     };
  // },
  mounted() {
      let that = this;
      riskDataStatistics().then(res=>{
          this.optionData[0].value=res.data.lowRiskCount
          this.optionData[1].value=res.data.mediumRiskCount
          this.optionData[2].value=res.data.highRiskCount
          setTimeout(function () {
              that.initChart5();
          }, 0)
      })
  },
  methods: {
      setLabel() {
          this.optionData.forEach((item, index) => {
              item.itemStyle = {
                  color: color[index],
              };

              item.label = {
                  normal: {
                      show: false,  
                      color: color[index],
                      position: 'center',
                      textStyle: {
                          fontSize: 12,
                          fontWeight: "bold",
                      },
                      offset: [0, 3],
                      formatter: [
                          "{d|{d}%}",
                          "{b|{b}}",
                      ].join("\n"),
                      rich: {
                          b: {
                              lineHeight: 12,
                              fontSize: 12,
                              align: "left",
                              color: color[index],
                          },
                          c: {
                              fontSize: 12,
                              textShadowColor: "#1c90a6",
                              textShadowOffsetX: 0,
                              textShadowOffsetY: 2,
                              textShadowBlur: 5,
                              color: color[index],
                          },
                          d: {
                              color: color[index],
                              align: "left",
                              fontSize: 12,
                          },
                      },
                  },
              };
              item.labelLine = {
                  normal: {
                      length2: 30,
                      lineStyle: {
                          width: 1,
                          color: color[index],
                      },
                  },
              };
          });
      },
      initChart5() {
          this.statusChart = echarts.init(this.$refs.chart);
          this.option = getPie3D(this.optionData, 0.9, 170, 30, 10, 1);
          this.statusChart.setOption(this.option);
          this.option.series.push({
              name: "风险分布", 
              backgroundColor: "transparent",
              type: "pie",
              label: {
                  opacity: 1,
                  fontSize: 13,
                  lineHeight: 20,
                  show: false,
              },
              startAngle: -40,
              clockwise: false,
              radius: ["50%", "70%"],
              center: ["50%", "50%"],
              data: this.optionData,
              itemStyle: {
                  opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
              },

          });
          this.statusChart.setOption(this.option);
          this.bindListen(this.statusChart);
      }, bindListen(myChart, optionName = "option") {
          let selectedIndex = "";
          let hoveredIndex = "";

          myChart.on("mouseover", (params) => {
              let isSelected;
              let isHovered;
              let startRatio;
              let endRatio;
              let k;
              if (hoveredIndex === params.seriesIndex) {
              } else {
                  if (hoveredIndex !== "") {
                      isSelected =
                          this[optionName].series[hoveredIndex].pieStatus.selected;
                      isHovered = false;
                      startRatio =
                          this[optionName].series[hoveredIndex].pieData.startRatio;
                      endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
                      k = this[optionName].series[hoveredIndex].pieStatus.k;
                      this[optionName].series[hoveredIndex].parametricEquation =
                          getParametricEquation(
                              startRatio,
                              endRatio,
                              isSelected,
                              isHovered,
                              k,
                              this[optionName].series[hoveredIndex].pieData.value
                          );
                      this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
                      hoveredIndex = "";
                  }
                  if (
                      params.seriesName !== "mouseoutSeries" &&
                      params.seriesName !== "风险分布"
                  ) {
                      isSelected =
                          this[optionName].series[params.seriesIndex].pieStatus.selected;
                      isHovered = true;
                      startRatio =
                          this[optionName].series[params.seriesIndex].pieData.startRatio;
                      endRatio =
                          this[optionName].series[params.seriesIndex].pieData.endRatio;
                      k = this[optionName].series[params.seriesIndex].pieStatus.k;
                      this[optionName].series[params.seriesIndex].parametricEquation =
                          getParametricEquation(
                              startRatio,
                              endRatio,
                              isSelected,
                              isHovered,
                              k,
                              this[optionName].series[params.seriesIndex].pieData.value + 60
                          );
                      this[optionName].series[params.seriesIndex].pieStatus.hovered =
                          isHovered;
                      hoveredIndex = params.seriesIndex;
                  }
                  myChart.setOption(this[optionName]);
              }
          });
          myChart.on("globalout", () => {
              let isSelected;
              let isHovered;
              let startRatio;
              let endRatio;
              let k;
              if (hoveredIndex !== "") {
                  isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
                  isHovered = false;
                  k = this[optionName].series[hoveredIndex].pieStatus.k;
                  startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
                  endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
                  this[optionName].series[hoveredIndex].parametricEquation =
                      getParametricEquation(
                          startRatio,
                          endRatio,
                          isSelected,
                          isHovered,
                          k,
                          this[optionName].series[hoveredIndex].pieData.value
                      );
                  this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
                  hoveredIndex = "";
              }
              myChart.setOption(this[optionName]);
          });
      },
      // 自适应宽高
      changeSize() {
          this.statusChart.resize();
      },
  },

};
</script>
